<template>
    <div id="main">
        <div id="body">
            <div id="two">
                <div id="towmid">
                    <p class="dian">·</p><p class="black">当</p><p class="grey">/</p>
                    <p class="black">当</p><p class="grey">/</p><p class="black">为</p>
                    <p class="grey">/</p><p class="black">您</p><p class="grey">/</p>
                    <p class="black">推</p><p class="grey">/</p><p class="black">荐</p><p class="dian">·</p>
                </div>
                <p id="pp">RECOMMENDED FOR YOU</p>
            </div>
        </div>
    </div>
</template>

<script>
import bodiv from '../components/ShopDiv.vue';
    export default {
        components: {
            bodiv,
        },
    }
</script>

<style lang="scss" scoped>
    ::v-deep .van-nav-bar__title{
        font-weight: bold;
        font-size: 4.5vw;
    }
    #main{
        background: rgb(244, 241, 241);
        #body{
            #two{
                text-align: center;
                #towmid{
                    display: flex;
                    padding-left: 16vw;
                    p{
                        padding-left: 2.5vw;
                    }
                    .dian{
                        padding-top: 1vw;
                        font-weight: bold;
                    }
                    .black{
                        font-weight: bold;
                    }
                    .grey{
                        color: #aaa;
                        padding-top: 0.5vw;
                        
                    }
                }
                #pp{
                    font-size: 3vw;
                    color: #aaa;
                    padding-bottom: 4vw;
                }
            }
        }
    }
</style>